import React, { Component } from 'react';
import { connect } from 'react-redux'
import actions from '../../store/actions';
class Index extends Component {
  state = {
    isEdit: false
  }
  handleClick(v) {
    console.log(v);
    this.props.dispatch(actions.switchCode(v))
  }
  render() {
    const { menu } = this.props
    const { isEdit } = this.state
    return (
      <div>
        <h1>我的频道   <button onClick={ () => this.setState({ isEdit: !isEdit }) }>{  isEdit ? '完成' : '编辑' }</button> </h1>
        <div className="menu-bar">
          {
            menu.length > 0 && menu.filter(item => !item.code).map((v, i) => {
              return (
                <b key={i}>
                  {v.title}
                  { isEdit && <span onClick={ () => this.handleClick(v) }>x</span> }
                </b>
              )
            })
          }
        </div>


        <h1>隐藏频道</h1>
        <div className="menu-bar">
          {
            menu.length > 0 && menu.filter(item => item.code ).map((v, i) => {
              return (
                <b key={i}>
                  {v.title}
                  { isEdit && <span onClick={ () => this.handleClick(v) }>+</span> }
                </b>
              )
            })
          }
        </div>
      </div>
    );
  }
}

const mapState = state => state
const mapDispatch = dispatch => ({ dispatch })
export default connect(mapState, mapDispatch)(Index);
